<template>
    <div class="loginbox">
        <form action="">
            <div class="username">
                <label for="username" class="iconfont">&#xe715;</label>
                <input type="text" name="username" id="username" placeholder="邮箱账号" v-model="loginData.name">
            </div>
            <div class="userpassword">
                <label for="userpassword" class="iconfont">&#xe709;</label>
                <input type="password" name="userpassword" id="userpassword" placeholder="密码" v-model="loginData.password">
            </div>
            <div class="logindl">
                <span class="loginprompt">{{ loginprompt }}</span>

                <div class="loginhelp">
                    <input type="radio" name="userstate" id="userstate" ref="userstate" @click="setUserState()">
                    <a :href="signURL">注册账号</a>
                </div>

                <input type="button" value="登录" class="loginsubmit" @click="judgeValue()">

            </div>
        </form>
    </div>
</template>



<script>
import axios from 'axios'
import qs from 'qs'

export default {
    data(){
        return {
            loginData:{
                name:'',
                password:'',
                setState:false
            },
            signURL:'http://' + window.location.host + '/#/signup',
            loginprompt:''
        }
    },
    methods:{
        setUserState:function(){
            // 设置一定时间内是否自动登录
            let radio = this.$refs.userstate;
            if(!this.loginData.setState){
                this.loginData.setState = true;
            }else{
               this.loginData.setState = false;
                radio.checked = false;
            }
        },
        judgeValue:function(){
            // 登录时 判断name\password格式是否符合要求
            let name = this.loginData.name;
            let password = this.loginData.password;

            // 邮箱格式：****@**.***
            let namereg = /^\w{5,20}@(163|qq).\w{2,5}$/ig;
            // 密码格式 包含中英6-15之间
            let passwordreg = /^\w{6,}$/;

            if(!namereg.test(name)){
                this.loginprompt = '请输入正确的qq/163邮箱';
            }else if(!passwordreg.test(password)){
                this.loginprompt = '请输入正确的包含中/英6位以上密码';
            }else{
                this.loginprompt = '';
               axios({
                   method:'post',
                   url:'http://lichunjiang.xyz/php/loginphp.php',
                   data:qs.stringify({
                       name:name,
                       password:password
                   })
               }).then((res)=>{
                   
                   if(res.status === 200 && res.data === 'yes good' ){
                       alert('成功登录')
                   }else{
                       alert('登录失败重新尝试')
                   }

               })
            }

        }

    }
}
</script>

<style scoped>

.loginbox{
    box-sizing: border-box;
}
.loginbox > form{
    width: 100%;
    padding: 0 80px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
 form .username,
 form .userpassword
{
    height: 70px;
    width: 100%;
    padding-top: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(228, 228, 228);
}
label{
    font-size: 24px;
    color: #D1DDE8;
    float: left;
}
.username input,
.userpassword input
{
    border: none;
    font-size: 18px;
    width: 80%;
    outline: none;
    padding-left: 10px;
    
}
input::-webkit-input-placeholder{
    color: #ccc;
}

.logindl{
    font-size: 14px;
    padding-bottom: 20px;
}
.logindl > .loginsubmit{
    width: 100%;
    height: 40px;
    border-radius: 20px;
    outline: none;
    border: none;
    background: #0371D1;
    color: white;
    font-size: 20px;
}

.logindl .loginhelp{
    padding-top: 30px;
    padding-bottom: 20px;
}
.loginhelp input[type="radio"]{
    border-color: red;
}
.loginhelp input[type="radio"]:hover{
    cursor: pointer;
}
.loginhelp input[type="radio"]::after{
    padding-left: 20px;
    content: "两周内自动登录";
    color: #9ABCDA;
    display: inline-block;
    width: 100px;
    position: relative;
    top: -3px;
}
.loginhelp  a{
    text-decoration: none;
    float: right;
    color: #0371D1;
    padding-left: 10px;
}
.loginprompt{
    display: block;
    padding-top: 6px;
    color: tomato;
}



</style>